<style>
    .role_list { width: 98%; margin: auto; padding: 0; }

    li.index { position: relative; display: block; list-style: none; border-bottom: 1px solid #dbdbdb; padding: 6px 0; }
    li.index:hover { background: #f1f1f1; }
    li.parent { cursor: pointer; }

    .role_list .role_id { font-weight: normal; margin-right: 6px; }
    .role_list .edit_box { display: inline-block; position: absolute; top: 8px; left: 50%; }
    .role_list .edit_box a { font-size: 12px; margin: 0 4px; }
    i.flag { width: 14px; color: #357ca5; text-align: center; display: inline-block; }

    .status-i { font-size: 18px; }
    .fa-check { color: green; }
    .fa-times { color: red; }
</style>
<p>正在为 <b><{$user.UserName}>[<{$user.Account}>]</b> 设置角色</p>

    <ul class="role_list">
        <{foreach $tree as $v}>
        <li class="index index_<{$v['Index']}> <{if !empty($v['ChildNum'])}>parent on<{/if}>" role="id_<{$v['RoleID']}>" for="id_<{$v['RoleParentID']}>"  style="padding-left: <{($v['Index']-1) * 30}>px;">
            <{if !empty($v['ChildNum'])}>
                <i class="tips fa fa-chevron-down flag"></i>
            <{else}>
                <i class="flag">·</i>
            <{/if}>

            <label class="role_id"><{$v['RoleID']}></label> <{$v['RoleName']}>
            <{if !empty($v['ChildNum'])}><b style="color: #357ca5;">(<{$v['ChildNum']}>)</b><{/if}>

            <div class="edit_box">
                <a href="javascript:;">
                    <{if in_array($v['RoleID'], $userRole)}>
                        <i class="status-i fa fa-check" data-id="<{$v['RoleID']}>"></i>
                    <{else}>
                        <i class="status-i fa fa-times" data-id="<{$v['RoleID']}>"></i>
                    <{/if}>
                </a>
            </div>
        </li>
        <{/foreach}>

        <button class="btn btn-primary" id="btn-save" title="保存">保存</button>
    </ul>

    <script>
        $(function(){
            $(".status-i").click(function(){
                $(this).toggleClass('fa-check fa-times');
            });

            $(".parent").click(function(){
                $(this).find('.tips').toggleClass('fa-chevron-right fa-chevron-down');
                $(this).toggleClass('on');

                var id = $(this).attr('role');

                $("li.index[for='"+id+"']").toggle();

                if(!$(this).hasClass('on')){
                    $("li.index[for='"+id+"'].on").click();
                }
            });

            $(".parent a").click(function(event){
                event.stopPropagation();
            });

            $("a[confirm]").click(function(){
                return window.confirm($(this).attr('confirm'));
            });

            $("#btn-save").click(function(){
                var array = [];
                $(".status-i.fa-check").each(function(){
                    array.push($(this).attr('data-id'));
                });

                $.post('/main/?r=user/saveRole', { role : array, user : '<{$user.UserID}>' }, function(rs){
                    if(rs.state){
                        alert('保存成功！');
                    }else{
                        alert(rs.msg);
                    }
                }, 'json');
            });
        });
    </script>